<template>
	<view class="work_index">
		<view class="wi_head" >
			
			<view class="wi_title" :style="{marginTop:top+'px'}">
				<view class="back_view">
					<image src="/static/imgs/back_left.png"></image>
				</view>
				<view class="back_title">
					<text>找工作</text>
				</view>
				
				<view class="back_view">
					
				</view>
			</view>
			<view class="wi_search">
				<view class="wis_left">
					<input placeholder="搜索"/>
					<view class="search_btn">
						<image src="/static/imgs/sousuo.png"></image>
					</view>
				</view>
				<view class="wis_right">
					<image src="/static/imgs/menu.png"></image>
					<text>条件筛选</text>
				</view>
			</view>
			
		</view>
		<view class="at_list">
			<view class="atl_view" @click="toWorkInfo">
				<view class="atlv_head">
					<view class="atlvh_left">
						<text>办公室文员</text>
					</view>
					<view class="atlvh_right">
						<text>3.5 - 4.5K</text>
					</view>
				</view>
				<view class="atlv_company">
					<text>云南云核矿业集团西山有限公司</text>
				</view>
				<view class="atlv_address">
					<view class="atlva_left">
						<text>昆明市 · 西山区 ·前卫西路</text>
					</view>
					<view class="atlva_right">
						<text>立即联系</text>
						<image src="/static/imgs/back.png"></image>
					</view>
				</view>
			</view>
			<view class="atl_view" @click="toWorkInfo">
				<view class="atlv_head">
					<view class="atlvh_left">
						<text>办公室文员</text>
					</view>
					<view class="atlvh_right">
						<text>3.5 - 4.5K</text>
					</view>
				</view>
				<view class="atlv_company">
					<text>云南云核矿业集团西山有限公司</text>
				</view>
				<view class="atlv_address">
					<view class="atlva_left">
						<text>昆明市 · 西山区 ·前卫西路</text>
					</view>
					<view class="atlva_right">
						<text>立即联系</text>
						<image src="/static/imgs/back.png"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:0
			}
		},
		mounted() {
			let windInfo= uni.getWindowInfo()
			this.top=windInfo.statusBarHeight
			console.log(windInfo)
		},
		methods: {
			toWorkInfo(){
				uni.navigateTo({
					url:"/pages/workinfo/workinfo"
				})
			}
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180.00deg, #f0f3f8 0%, #fff 100%);
	}
	.wi_head{
		width: 100%;
		height: 491rpx;
		background: linear-gradient(180.00deg, #0148da 0%, #0148da80 60.64%, #f0f3f800 100%);
		display: inline-block;
	}
	.wi_title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		height: 90rpx;
	}
	.wi_search{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 36rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.wis_left{
		flex: 1;
	}
	.wis_right{
		width: 190rpx;
		height: 64rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 14rpx;
		border-radius: 32rpx;
	}
	.wis_right image{
		width: 20rpx;
		height: 20rpx;
	}
	.wis_right text{
		font-size: 24rpx;
		color: #333333;
		margin-left: 6rpx;
	}
	.back_view{
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.back_view image{
		width: 100%;
		height: 100%;
	}
	.wis_left{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 64rpx;
		background: #fff;
		border-radius: 32rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	.wis_left image{
		width: 28.9rpx;
		height: 28.56rpx;
	}
	.wis_left input{
		flex: 1;
		height: 60rpx;
		border: 0px;
		outline: none;
		padding-left: 30rpx;
		box-sizing: border-box;
		
	}
	
	.at_list{
		width: 100%;
		display: inline-block;
		margin-top: -260rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.atl_view{
		width: 100%;
		
		border-radius: 8rpx;
		background: #fff;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.atlv_head{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.atlvh_left{
		font-size: 34rpx;
		color: #222222;
		font-weight: bold;
		line-height: 48rpx;
	}
	.atlvh_right{
		font-size: 30rpx;
		color: #26B785;
		line-height: 42rpx;
		font-weight: bold;
	}
	.atlv_company{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
		margin-top: 15rpx;
	}
	.atlv_address{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.atlva_left{
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
	}
	.atlva_right{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.atlva_right text{
		font-size: 24rpx;
		color: #A3B0CB;
		line-height: 33rpx;
	}
	.atlva_right image{
		width: 20rpx;
		height: 20rpx;
		margin-left: 6rpx;
	}
</style>
